<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 统一身份认证平台</title>
    <!-- 引入vue element 使用所需jar包 -->
    <link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/loginRegister.css">
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/element-ui/lib/index.js"></script>
    <link rel="icon" href="../img/favicon.ico" type="image/x-icon"> <!-- 确保 favicon 格式正确 -->
</head>

<body>
<div id="app" class="container">
    <div class="header">
        <img src="../img/logo1.png" alt="华北水利水电大学">
        <span> | </span>
        <span>文体会堂预约系统</span>
    </div>
    <div class="register-bg">
        <div class="register-box">
            <h2>统一身份认证平台 - 注册</h2>
            <el-form ref="form" :model="user" label-width="80px">
                <el-form-item label="账号：">
                    <el-input v-model="user.userId" placeholder="学号/工号"></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input placeholder="密码" v-model="user.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码：">
                    <el-input placeholder="确认密码" v-model="user.confirmPassword" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onRegisterSubmit" class="register-button">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
<div class="footer">
    版权所有：华北水利水电大学 | 豫ICP备05002494-1 | 豫公网安备 41010702002321号
</div>

<script>
    new Vue({
        el:"#app",
        data() {
            return {
                user: {
                    userId: "",
                    password: "",
                    confirmPassword: ""
                }
            }
        },
        methods: {
            onRegisterSubmit() {
                if (this.user.password !== this.user.confirmPassword) {
                    this.$message.error("两次输入的密码不一致");
                    return;
                }

                const url = "/register"; // 假设注册接口路径为 /register
                axios.post(url, this.user).then((resp) => {
                    if (resp.data.msg === "success") {
                        this.registerSuccessPromptMsg();
                        setTimeout(() => {
                            window.location.href = "/pages/login.html";  // 注册成功后跳转到登录页面
                        }, 1000);
                    } else {
                        this.registerErrorMsg();
                    }
                })
            },
            registerSuccessPromptMsg() {
                this.$message({
                    message: '注册成功！',
                    type: 'success'
                })
            },
            registerErrorMsg() {
                this.$message.error('注册失败，请检查输入信息后重试');
            }
        }
    })
</script>
</body>
</html>
